<template>
	<view>
		<head-navbar :back="true">
			<view>订单详情</view>
		</head-navbar>
		<view class="content">
			<view class="top">
				<view class="orderNum">
					<view class="left">
						<view class="title">订单号：</view>
						<text>{{OrderMsg.orderNo}}</text>
						<view @click="setNumber" style="padding:4upx 6upx;margin-left: 10upx;">复制</view>
					</view>
				</view>
				<view class="orderNum" v-if="msg.state != 1">
					<view class="left">
						<view class="title">下单时间：</view>
						<text>{{OrderMsg.payTime}}</text>
					</view>
				</view>
				<view class="orderNum" v-if="msg.state != 1">
					<view class="left">
						<view class="title">实付款：</view>
						<view class="pay">
							<!-- <text class="total" v-if="msg.state == 2">{{OrderMsg.paymentAmount}}</text> -->
							<text class="total">￥{{OrderMsg.paymentAmount}}</text>
						</view>
					</view>
				</view>
				<view class="orderNum">
					<view class="left">
						<view class="title">运 费：</view>
						<text>￥{{OrderMsg.freight}} </text>
					</view>
				</view>
				<view class="stateBox">
					{{ title }}
				</view>
			</view>

			<view class="top">
				<view class="orderNum pat-bot-30">
					<view class="left">
						<text>{{OrderMsg.orderLogisticsModel.consigneeName}}</text>
					</view>
				</view>
				<view class="orderNum pat-bot-30">
					<view class="left">
						<text class="title">{{OrderMsg.orderLogisticsModel.consigneePhone}}</text>
					</view>
				</view>
				<view class="orderNum">
					<view class="left">
						<view class="imgbox" style="display: flex;align-items: center;justify-content: center;">
							<image src="../../../static/img/orderIcon.png" mode="" style="width: 30upx;height: 30upx;margin: 0;"></image>
						</view>
						<text>{{OrderMsg.orderLogisticsModel.consigneeAddress}}</text>
					</view>
				</view>
			</view>

			<view class="top">
				<view class="orderNum pat-bot-30">
					<view class="left">

						<image :src="OrderMsg.merchantHeadImage" mode=""></image>
						<text>{{OrderMsg.merchantName}}</text>
					</view>
				</view>
				<view class="orderNum pat-bot-30">
					<view class="left">
						<text class="title" style="width: 100%;">商家电话：{{OrderMsg.merchantPone}}</text>
					</view>
				</view>
				<view class="orderNum align-item">
					<view class="left">
						<image :src="OrderMsg.goodsSpecsImg" mode="" class="goodsImg"></image>
					</view>
					<view class="right">
						<view class="head">
							{{OrderMsg.goodsName}}
						</view>
						<view class="price" style="width: 500upx;">
							<view class="juanBox-color">
								<text>￥{{OrderMsg.unitPrice}}</text>
							</view>
							<view class="count">
								X {{OrderMsg.quantity}}
							</view>
						</view>
					</view>
				</view>
				<view class="orderNum">
					<view class="left">
						<view class="title">规格：</view>
					</view>
					<view class="right" style="padding: 0;">
						{{OrderMsg.goodsSpecsName}}
					</view>
				</view>

				<view class="btnGroup">
					<button type="default" class="cancel" v-show="msg.state == 1" @click="cancelBtn()">取消订单</button>
					<button type="default" class="goBuy" v-show="msg.state == 1" @click="toPay">立即支付</button>
					<!-- <button type="default" class="goBuy" v-show="msg.state == 2" @click="consignment()">发布预售</button> -->
					<button type="default" class="goBuy" v-show="msg.state == 3" @click="utils.toast('已提醒卖家发货', 'success')">提醒发货</button>
					<button type="default" class="goBuy" v-show="msg.state == 4" @click="comfimOrder()">确认收货</button>
					<!-- <button type="default" class="goBuy" v-show="msg.state == 5">获赠奖励</button> -->
					<!-- <button type="default" class="goBuy" v-show="msg.state == 6" @click="toPage(0,'/pages/evaluation/evaluation?id=' )">去评价</button> -->
				</view>
			</view>

			<view class="top">
				<view class="orderNum">
					<view class="left">
						<view class="title">运单号：</view>
						<text>{{OrderMsg.status <= 3 ? '暂无信息' : OrderMsg.orderLogisticsModel.shipmentNumber || '暂无信息'}}</text>
						<view @click="setNumber" style="padding:4upx 8upx;margin-left: 10upx;" v-if="OrderMsg.status > 3">复制</view>
					</view>
				</view>
				<view class="orderNum">
					<view class="left">
						<view class="title">物流公司：</view>
						<text>{{OrderMsg.status <= 3 ? '暂无信息' : OrderMsg.orderLogisticsModel.logisticsName || '暂无信息'}}</text>
					</view>
				</view>
			</view>


			<view class="bottom" v-if="msg.state == 4 || msg.state == 5 ">
				<view v-for="(item, index) in tracesData" :key="index">
					<trackNode :is-first="index===tracesData.length-1" :is-newest="index===0" :is-main-node="item.isMainNode"
					 :node-data="item"></trackNode>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import trackNode from '@/components/etherealwheat-track/trackNode.vue';
	import * as api from '@/api/order/index.js';
	export default {
		components: {
			trackNode
		},
		data() {
			return {
				title: '',
				orderId: '',
				msg: {
					state: 1,
					orderNumber: 'HJH1545613145151',
					total: '100.00',
					freight: 50,
				},
				OrderMsg: {orderLogisticsModel:""},
				tracesData: []
			}
		},
		computed: {},
		onLoad(option) {
			this.msg.state = option.state;
			this.orderId = option.id;
			this.getTitle(option.state);
			this.getOrderDetail();
		},
		methods: {
			getTitle(state) {
				switch (state) {
					case '1':
						this.title = '待付款';
						break;
					case '2':
						this.title = '待处理'
						break;
					case '3':
						this.title = '待发货'
						break;
					case '4':
						this.title = '待收货'
						break;
					case '6':
						this.title = '已取消'
						break;
					case '5':
						this.title = '已完成'
						break;
					case '7':
						this.title = '已关闭'
						break;
					case '8':
						this.title = '预售中'
						break;
					default:
						break;
				}
			},
			// 复制
			setNumber() {
				uni.setClipboardData({
					data: '1313131313',
					success: function() {
						console.log('success');
					}
				});
			},
			toPay() {
				uni.showLoading({
					title: '去支付中...'
				})
				api.toPay({
					orderId: this.OrderMsg.orderId
				}).then(res => {
					uni.hideLoading()
					uni.setStorageSync('orderList', res.data.obj)
					uni.navigateTo({
						url:'/pages/order/createOrder?orderType=3&orderId=' + this.OrderMsg.orderId +'&price=' + (this.OrderMsg.quantity*this.OrderMsg.unitPrice)+'&freight='+this.OrderMsg.freight
					})
				}).catch(err => {
					uni.hideLoading()
				})
			},
			async consignment() {
				try {
					let params = {
						orderId: this.OrderMsg.orderId
					}
					const ret = await api.consignmentOrder(params);
					this.getOrderDetail();
				} catch (error) {
					console.log(error)
					this.getOrderDetail();
				}
			},
			async comfimOrder() {
				try {
					let params = {
						orderId: this.OrderMsg.orderId
					}
					const ret = await api.receiptOrder(params);

					this.$refs.uToast.show({
						title: ret.data.msg
					})
					this.getOrderDetail();
				} catch (error) {
					console.log(error)
					this.$refs.uToast.show({
						title: error.data.msg,
						typ:'error'
					})
					this.getOrderDetail();
				}
			},
			async cancelBtn() {
				try {
					let params = {
						orderId: this.OrderMsg.orderId,
						quantity: this.OrderMsg.quantity
					}
					const ret = await api.cancelOrder(params);
					this.getOrderDetail();
				} catch (error) {
					console.log(error)
					this.getOrderDetail();
				}
			},
			async getOrderDetail() {
				try {
					let params = {
						orderId: this.orderId
					}
					const ret = await api.getOrderInfo(params);
					this.OrderMsg = ret.data.obj;
					if (this.msg.state == 4 || this.msg.state == 5 ) {
						let list = ret.data.obj.logisticsVo.list;
						// list.shift()
						this.tracesData = this.changeList(list);
					}
				} catch (error) {
					console.log(error)
				}
			},
			changeList(list) {
				list.forEach(e => {
					e.acceptStation = e.status, // 节点描述
						e.createTime = e.time,
						e.status = 'DELIVERING', // 节点状态
						e.phone = '', // 电话
						e.statusName = '运输中',
						e.isMainNode = false; // 是否主节点，主节点前方展示icon

					if (e.acceptStation.indexOf('已签收') != -1) {
						e.isMainNode = true;
						e.statusName = "已签收";
						e.status = 'COMPLETE';
					} else if (e.acceptStation.indexOf('正在派件') != -1) {
						e.isMainNode = true;
						e.statusName = "派件中";
					}
				})

				return list
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
